import React, { useState, useRef } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Modal,
  Platform,
  StatusBar,
  TouchableWithoutFeedback,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
const SearchBar = (props) => {
  let positionMark = useRef();
  const [isVisible, setIsVisible] = useState(false);
  const [topOffset, setTopOffset] = useState(0); //控制modal偏移量 距离上方多少
  const showModal = () => {
    positionMark.current.measure((x, y, width, height, pageX, pageY) => {
      //Android的Y轴坐标是从状态栏以下开始计算的，而屏幕高度是包含了状态栏在内的,因此需要减去相应的高度
      // iOS是从屏幕顶端开始计算的
      const AndroidStatusBar =
        Platform.OS === "android" ? StatusBar.currentHeight : 0;
      const topOffset = pageY + height - AndroidStatusBar; // 计算"筛选"距离页面顶部的偏移量
      setTopOffset(topOffset);
      console.log("偏移量---", topOffset);
    });
  };

  return (
    <View style={styles.headerStyle}>
      {/* <View style={styles.user}>
        <TouchableOpacity onPress={() => props.onPressHome()}>
          <FontAwesome name="user-circle-o" size={22} color="#DBD9D9" />
        </TouchableOpacity>
      </View> */}
      <View style={styles.searchBar}>
        <TouchableOpacity
          style={styles.searchInput}
          onPress={() => props.onPressSearch()}
        >
          <Text style={styles.searchText}>搜索商品/材料名</Text>
        </TouchableOpacity>
        <View style={styles.searchIcon}>
          <Feather name="search" size={20} color="#51A9FF" />
        </View>
      </View>

      <View style={styles.addItem}>
        <TouchableOpacity
          ref={positionMark}
          style={{ padding: 3 }}
          onPress={() => {
            setIsVisible(!isVisible);
            showModal();
          }}
        >
          <Entypo name="dots-three-vertical" size={16} color="#DBD9D9" />
        </TouchableOpacity>
      </View>

      <Modal visible={isVisible} animationType="fade" transparent={true}>
        <View style={styles.ModalBackground}></View>
        <TouchableWithoutFeedback onPress={() => setIsVisible(false)}>
          <View style={{ height: topOffset }}></View>
        </TouchableWithoutFeedback>

        <View style={[styles.bubblePosition, { top: topOffset + 15 }]}>
          <View style={styles.bubbleModal}>
            <View style={styles.triangle} />
            <View style={styles.rectangle}>
              <TouchableOpacity
                style={styles.rectangleItem}
                onPress={() => {
                  console.log("点击添加材料");
                  props.onPressAddMaterial();
                  setIsVisible(false);
                }}
              >
                <MaterialIcons name="add-chart" size={24} color="#A9A9A9" />
                <Text style={styles.rectangleText}>添加材料</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.rectangleItem}
                onPress={() => {
                  props.onPressAddGood();
                  setIsVisible(false);
                }}
              >
                <MaterialIcons name="add-business" size={24} color="#A9A9A9" />
                <Text style={styles.rectangleText}>添加商品</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.rectangleItem}
                onPress={() => {
                  props.onPressBack();
                  setIsVisible(false);
                }}
              >
                <Entypo name="back" size={24} color="#A9A9A9" />
                <Text style={styles.rectangleText}>退出登录</Text>
              </TouchableOpacity>
              {/* <TouchableOpacity
                style={styles.rectangleItem}
                onPress={() => {
                  props.onPressMultiDelete();
                  console.log("开始批量删除");
                  setIsVisible(false);
                }}
              >
                <MaterialCommunityIcons
                  name="delete-empty"
                  size={24}
                  color="#A9A9A9"
                />
                <Text style={styles.rectangleText}>批量删除</Text>
              </TouchableOpacity> */}
            </View>
          </View>
        </View>
        <TouchableWithoutFeedback onPress={() => setIsVisible(false)}>
          <View style={{ flex: 1 }}></View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  headerStyle: {
    backgroundColor: "#ffffff",
    height: 52,
    // padding: 10,
    paddingLeft: 10,
    paddingRight: 10,

    alignItems: "center", // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
    flexDirection: "row",
    justifyContent: "space-between",
  },
  user: {},

  searchBar: {
    height: 38,
    borderRadius: 5,
    alignItems: "center",
    backgroundColor: "#F2F2F2",
    flexDirection: "row", // 水平排布
    flex: 1,
    justifyContent: "space-between",
    paddingLeft: 10,
    marginLeft: 10,
    marginRight: 5,
  },
  searchInput: {
    // alignItems: "center",
    // backgroundColor: "yellow",
    flex: 1,
  },
  searchText: {
    fontSize: 16,
    // backgroundColor: "green",
    color: "#9d9d9d",
    padding: 5,
  },
  searchIcon: {
    marginRight: 5,
    // backgroundColor: "blue",
    marginLeft: 5,
  },

  addItem: {},
  bubblePosition: {
    position: "absolute",
    right: 5,
  },

  triangle: {
    width: 0,
    height: 0,
    borderBottomWidth: 5,
    borderBottomColor: "#fff",
    borderLeftWidth: 5,
    borderLeftColor: "transparent",
    borderRightWidth: 5,
    borderRightColor: "transparent",
    position: "absolute",
    right: 10,
    top: -5,
    zIndex: 5,
  },
  bubbleModal: {
    position: "relative",
  },
  rectangle: {
    backgroundColor: "#fff",
    paddingTop: 25,
    paddingLeft: 15,
    borderRadius: 15,
    borderTopRightRadius: 10,
    paddingRight: 20,
    zIndex: 5,
    paddingRight: 30,
  },
  rectangleText: {
    fontSize: 16,
    marginLeft: 10,
  },
  rectangleItem: {
    // backgroundColor: "yellow",
    flexDirection: "row",
    marginBottom: 25,
    zIndex: 10,
    // padding: 10,
  },
  ModalBackground: {
    backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
});

export default SearchBar;
